import React, { Component } from 'react'
import TwsLayout from './component/tws-layout/index'
import { connect } from 'react-redux'
import locales from './locales'
import {
    HashRouter as Router,
    Route
} from 'react-router-dom'

import studentAssignmentPageBody from './component/student-assignment-page-body'
import TutorAssignmentPageBody from './component/tutor-assignment-page-body'
import {LocaleProvider} from 'antd'
import {IntlProvider} from 'react-intl'
import {getLangFromLocalStorage} from './constant/lang-util'

class App extends Component {
  render () {
    const lang = this.props.lang || getLangFromLocalStorage()
    const langData = locales[lang]

    return (
      <IntlProvider locale={langData.intlLocale} messages={langData.intlMessage}>
        <LocaleProvider locale={langData.locale}>
          <Router>
            <TwsLayout lang={lang}>
              <div>
                <Route exact path='/' component={studentAssignmentPageBody} />
                <Route path='/student/program/:programId/task/:taskId/assignment/:assignmentId/quiz/:quizId' component={studentAssignmentPageBody} />
                <Route path='/tutor/program/:programId/task/:taskId/student/:studentId/assignment/:assignmentId/quiz/:quizId' component={TutorAssignmentPageBody} />
                <Route path='/tutor/program/:programId/task/:taskId/student/:studentId/divider/assignment/:assignmentId/quiz/:quizId' component={TutorAssignmentPageBody} />
              </div>
            </TwsLayout>
          </Router>
        </LocaleProvider>
      </IntlProvider>
    )
  }
}

const mapStateToProps = ({lang}) => ({lang})

export default connect(mapStateToProps)(App)
